export default {
    props: {
        content_type: {
            type: String
        },
        custom_content_type: {
            type: String
        },
    },
    emits: [
        'update:content_type',
        'update:custom_content_type',
    ],
    data() {
        return {
            types: [
                "application/json",
                "application/xml",
                "application/x-www-form-urlencoded",
                "custom",
            ]
        }
    },
    template: `
        <div>
            <div>Content-type</div>
            <div class="wa-select width-100">
                <select :value="content_type" @input="$emit('update:content_type',$event.target.value)">
                    <option v-for="t in types" :key="t" :value="t">
                        {{t}}
                    </option>
                </select>
            </div>
            <div v-show="content_type === 'custom'">
                <input 
                    class="width-100 custom-mt-4"
                    type="text"
                    :value="custom_content_type"
                    @input="$emit('update:custom_content_type',$event.target.value)"
                    placeholder="Custom content-type"
                >
            </div>
        </div>
    `,
}
